// 强制Element Plus输入框边框可见 - 全局样式
.el-input,
.el-textarea,
.el-input-number,
.el-select {
    .el-input__wrapper {
        border: 1px solid #dcdfe6 !important;
        border-radius: 4px !important;
        box-shadow: 0 0 0 1px #dcdfe6 inset !important;
        background-color: #ffffff !important;
        &:hover {
            border-color: #c0c4cc !important;
            box-shadow: 0 0 0 1px #c0c4cc inset !important;
        }
        &.is-focus {
            border-color: #409eff !important;
            box-shadow: 0 0 0 1px #409eff inset !important;
        }
        &.is-disabled {
            border-color: #e4e7ed !important;
            box-shadow: 0 0 0 1px #e4e7ed inset !important;
            background-color: #f5f7fa !important;
        }
    }
    .el-input__inner {
        border: none !important;
        box-shadow: none !important;
        background: transparent !important;
    }
}

.el-textarea {
    .el-textarea__inner {
        border: none !important;
        box-shadow: none !important;
        background: transparent !important;
        resize: vertical;
    }
}

// 专门针对textarea的边框样式 - 使用更具体的选择器
.el-textarea {
    .el-textarea__inner {
        border: 2px solid #dcdfe6 !important;
        border-radius: 4px !important;
        background-color: #ffffff !important;
        box-shadow: none !important;
        resize: vertical !important;
        &:hover {
            border-color: #c0c4cc !important;
        }
        &:focus {
            border-color: #409eff !important;
            outline: none !important;
        }
    }
    .el-input__wrapper {
        border: none !important;
        box-shadow: none !important;
        background: transparent !important;
    }
}

// 专门针对网站描述textarea的边框样式
.site-description-textarea {
    .el-textarea__inner {
        border: 3px solid #dcdfe6 !important;
        border-radius: 6px !important;
        background-color: #ffffff !important;
        box-shadow: none !important;
        resize: vertical !important;
        &:hover {
            border-color: #c0c4cc !important;
        }
        &:focus {
            border-color: #409eff !important;
            outline: none !important;
            box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2) !important;
        }
    }
    .el-input__wrapper {
        border: none !important;
        box-shadow: none !important;
        background: transparent !important;
    }
}

// 系统设置页面样式
.system-settings {
    padding: 24px;
    background: #f5f7fa;
    min-height: calc(100vh - 64px - 120px); // 减去导航栏高度和页脚高度
    // 示例数据提示
    .sample-data-notice {
        margin-bottom: 24px;
    }
    // 页面标题
    .page-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 24px;
        padding: 20px 24px;
        background: white;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        .page-title {
            margin: 0;
            font-size: 24px;
            font-weight: 600;
            color: #303133;
        }
    }
    // 设置选项卡
    .settings-tabs {
        background: white;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        overflow: hidden;
        .el-tabs__header {
            margin: 0;
            background: #fafafa;
            border-bottom: 1px solid #e4e7ed;
            .el-tabs__nav-wrap {
                padding: 0 24px;
            }
            .el-tabs__item {
                height: 48px;
                line-height: 48px;
                font-size: 14px;
                font-weight: 500;
                color: #606266;
                border-bottom: 2px solid transparent;
                transition: all 0.3s;
                &:hover {
                    color: #409eff;
                }
                &.is-active {
                    color: #409eff;
                    border-bottom-color: #409eff;
                }
            }
        }
        .el-tabs__content {
            padding: 0;
        }
        .el-tab-pane {
            padding: 0;
        }
    }
    // 选项卡内容
    .tab-content {
        padding: 32px;
        // 表单样式
        .el-form {
            max-width: 600px;
            .el-form-item {
                margin-bottom: 24px;
                .el-form-item__label {
                    font-weight: 500;
                    color: #303133;
                }
                .el-input,
                .el-textarea,
                .el-select,
                .el-input-number {
                    width: 100%;
                    // 确保输入框边框可见
                    .el-input__wrapper {
                        border: 1px solid #dcdfe6 !important;
                        border-radius: 4px !important;
                        box-shadow: 0 0 0 1px #dcdfe6 inset !important;
                        &:hover {
                            border-color: #c0c4cc !important;
                            box-shadow: 0 0 0 1px #c0c4cc inset !important;
                        }
                        &.is-focus {
                            border-color: #409eff !important;
                            box-shadow: 0 0 0 1px #409eff inset !important;
                        }
                    }
                    .el-input__inner {
                        border: none !important;
                        box-shadow: none !important;
                    }
                }
                .el-switch {
                    margin-top: 4px;
                }
                .el-checkbox-group {
                    .el-checkbox {
                        margin-right: 16px;
                        margin-bottom: 8px;
                    }
                }
            }
        }
    }
    // 日志相关样式
    .logs-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 24px;
        padding: 16px 20px;
        background: #f8f9fa;
        border-radius: 6px;
        border: 1px solid #e9ecef;
        .logs-filters {
            display: flex;
            align-items: center;
            gap: 12px;
            .el-select {
                width: 120px;
            }
            .el-date-editor {
                width: 240px;
            }
        }
        .logs-actions {
            display: flex;
            gap: 12px;
        }
    }
    .logs-content {
        .el-table {
            border-radius: 6px;
            overflow: hidden;
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
            .el-table__header {
                background: #f8f9fa;
            }
            .el-table__row {
                &:hover {
                    background: #f5f7fa;
                }
            }
        }
    }
    // 系统状态样式
    .status-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 24px;
        margin-bottom: 32px;
        .status-card {
            background: white;
            border-radius: 8px;
            padding: 24px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
            border: 1px solid #e4e7ed;
            .status-header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 16px;
                padding-bottom: 12px;
                border-bottom: 1px solid #f0f0f0;
                h3 {
                    margin: 0;
                    font-size: 16px;
                    font-weight: 600;
                    color: #303133;
                }
            }
            .status-content {
                margin-bottom: 20px;
                p {
                    margin: 8px 0;
                    font-size: 14px;
                    color: #606266;
                    line-height: 1.5;
                    strong {
                        color: #303133;
                        font-weight: 500;
                    }
                }
            }
            .status-actions {
                display: flex;
                gap: 12px;
            }
        }
    }
    .system-actions {
        display: flex;
        justify-content: center;
        padding: 24px;
        background: #f8f9fa;
        border-radius: 6px;
        border: 1px solid #e9ecef;
    }
    // 日志详情对话框
    .log-details {
        pre {
            background: #f8f9fa;
            padding: 12px;
            border-radius: 4px;
            border: 1px solid #e9ecef;
            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
            font-size: 12px;
            line-height: 1.4;
            color: #495057;
            overflow-x: auto;
            white-space: pre-wrap;
            word-wrap: break-word;
        }
    }
    // 响应式设计
    @media (max-width: 768px) {
        padding: 16px;
        .page-header {
            flex-direction: column;
            gap: 16px;
            align-items: stretch;
            .page-title {
                text-align: center;
            }
        }
        .tab-content {
            padding: 20px;
            .el-form {
                max-width: 100%;
            }
        }
        .logs-header {
            flex-direction: column;
            gap: 16px;
            align-items: stretch;
            .logs-filters {
                flex-wrap: wrap;
                gap: 8px;
                .el-select,
                .el-date-editor {
                    width: 100%;
                }
            }
            .logs-actions {
                justify-content: center;
            }
        }
        .status-grid {
            grid-template-columns: 1fr;
            gap: 16px;
        }
    }
    // 动画效果 - 优化性能
    .el-tab-pane {
        animation: fadeIn 0.2s ease-out;
        will-change: opacity;
    }
    @keyframes fadeIn {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }
    // 加载状态
    .el-loading-mask {
        background: rgba(255, 255, 255, 0.8);
    }
    // 按钮样式优化
    .el-button {
        &.is-loading {
            pointer-events: none;
        }
    }
    // 表单验证样式
    .el-form-item.is-error {
        .el-input__inner,
        .el-textarea__inner {
            border-color: #f56c6c;
        }
    }
    .el-form-item__error {
        color: #f56c6c;
        font-size: 12px;
        line-height: 1;
        padding-top: 4px;
    }
    // 标签样式
    .el-tag {
        &.el-tag--danger {
            background: #fef0f0;
            border-color: #fbc4c4;
            color: #f56c6c;
        }
        &.el-tag--warning {
            background: #fdf6ec;
            border-color: #f5dab1;
            color: #e6a23c;
        }
        &.el-tag--info {
            background: #f4f4f5;
            border-color: #d3d4d6;
            color: #909399;
        }
        &.el-tag--success {
            background: #f0f9ff;
            border-color: #b3d8ff;
            color: #409eff;
        }
    }
    // 开关样式
    .el-switch {
        &.is-checked {
            .el-switch__core {
                border-color: #409eff;
                background-color: #409eff;
            }
        }
    }
    // 复选框组样式
    .el-checkbox-group {
        .el-checkbox {
            .el-checkbox__label {
                font-size: 14px;
                color: #606266;
            }
            .el-checkbox__input.is-checked {
                .el-checkbox__inner {
                    background-color: #409eff;
                    border-color: #409eff;
                }
            }
        }
    }
    // 数字输入框样式
    .el-input-number {
        .el-input__inner {
            text-align: left;
        }
    }
    // 表格样式优化
    .el-table {
        .el-table__header-wrapper {
            .el-table__header {
                th {
                    background: #f8f9fa;
                    color: #606266;
                    font-weight: 500;
                    border-bottom: 1px solid #e4e7ed;
                }
            }
        }
        .el-table__body-wrapper {
            .el-table__body {
                td {
                    border-bottom: 1px solid #f0f0f0;
                    padding: 12px 0;
                }
            }
        }
    }
    // 系统日志表格样式
    .logs-table {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        .el-table__body-wrapper {
            overflow-x: auto;
        }
    }
    // 日志内容区域样式
    .logs-content {
        overflow-x: auto;
        max-width: 100%;
    }
    // 全局Element Plus输入框样式修复 - 使用更高优先级的选择器
    .system-settings {
        .el-input,
        .el-textarea,
        .el-input-number {
            .el-input__wrapper {
                border: 1px solid #dcdfe6 !important;
                border-radius: 4px !important;
                box-shadow: 0 0 0 1px #dcdfe6 inset !important;
                background-color: #ffffff !important;
                &:hover {
                    border-color: #c0c4cc !important;
                    box-shadow: 0 0 0 1px #c0c4cc inset !important;
                }
                &.is-focus {
                    border-color: #409eff !important;
                    box-shadow: 0 0 0 1px #409eff inset !important;
                }
                &.is-disabled {
                    border-color: #e4e7ed !important;
                    box-shadow: 0 0 0 1px #e4e7ed inset !important;
                    background-color: #f5f7fa !important;
                }
            }
            .el-input__inner {
                border: none !important;
                box-shadow: none !important;
                background: transparent !important;
            }
        }
        // 文本域特殊样式
        .el-textarea {
            .el-textarea__inner {
                border: none !important;
                box-shadow: none !important;
                background: transparent !important;
                resize: vertical;
            }
        }
        // 数字输入框特殊样式
        .el-input-number {
            .el-input-number__decrease,
            .el-input-number__increase {
                border: 1px solid #dcdfe6;
                background-color: #f5f7fa;
                &:hover {
                    background-color: #e4e7ed;
                }
            }
        }
        // 下拉选择框样式
        .el-select {
            .el-input__wrapper {
                border: 1px solid #dcdfe6 !important;
                border-radius: 4px !important;
                box-shadow: 0 0 0 1px #dcdfe6 inset !important;
                &:hover {
                    border-color: #c0c4cc !important;
                    box-shadow: 0 0 0 1px #c0c4cc inset !important;
                }
                &.is-focus {
                    border-color: #409eff !important;
                    box-shadow: 0 0 0 1px #409eff inset !important;
                }
            }
        }
    }
    // 文本域特殊样式
    .el-textarea {
        .el-textarea__inner {
            border: none !important;
            box-shadow: none !important;
            background: transparent !important;
            resize: vertical;
        }
    }
    // 数字输入框特殊样式
    .el-input-number {
        .el-input-number__decrease,
        .el-input-number__increase {
            border: 1px solid #dcdfe6;
            background-color: #f5f7fa;
            &:hover {
                background-color: #e4e7ed;
            }
        }
    }
    // 下拉选择框样式
    .el-select {
        .el-input__wrapper {
            border: 1px solid #dcdfe6 !important;
            border-radius: 4px !important;
            box-shadow: 0 0 0 1px #dcdfe6 inset !important;
            &:hover {
                border-color: #c0c4cc !important;
                box-shadow: 0 0 0 1px #c0c4cc inset !important;
            }
            &.is-focus {
                border-color: #409eff !important;
                box-shadow: 0 0 0 1px #409eff inset !important;
            }
        }
    }
}